{% macro input() %}
<link rel="stylesheet" href="/css/home.css">
<div class="create-blog">

  <div>
    <textarea name="" id="blog-content" rows="3"></textarea>
  </div>

  <button id="btn-publish" class="btn btn-primary">发表</button>
  <svg class="bi" width="16" height="16" fill="currentColor">
    <use xlink:href="/images/bootstrap-icons.svg#card-image" />
  </svg>
  <!-- 实现图片上传 -->
  <input type="file" id="file-img">
  <!-- input 作用是存放图片上传后的url地址 -->
  <input type="hidden" value="" id="file-img-url">
  <a href="" id="img-upload">插入一张图片</a>
  <!-- 上传成功后的提示信息 -->
  <span class="img-info"></span>
</div>

<script>
  // 点击事件
  $("#img-upload").click(function (e) {
    e.preventDefault();
    // 触发 $("#file-img") jquery 对象的点击事件
    $("#file-img").click();
  })

  // 图片上传 $("#file-img") input标签
  $("#file-img").change(function () {
    // 获取到图片信息
    const file = $(this)[0].files[0];
    ajax.upload('/api/uploadImg', file, function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      // console.log(data, file)
      $(".img-info").text(file.name);
      $("#file-img-url").val(data.url);
    })
  })

  // 发布微博
  $("#btn-publish").click(function (e) {

    e.preventDefault();

    // 获取内容，获取图片地址
    const content = $("#blog-content").val();
    //1. 获取图片地址 代码补全
    const image = $("#file-img-url").val();

    if (!content) {
      alert("发表的内容不能为空");
      return;
    }
    const data = { content };

    if (image) { // 如果上传图片
      data.image = image;
    }
    // 2. 传递内容和图片地址
    ajax.post("/api/blog/createBlog", data, function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      alert("发表成功")
      // 刷新页面
      location.href = "";
      console.log(data)
    })
  })

  // @功能
  $('#blog-content').atwho({
    at: "@",
    data: '/api/user/getAtList',
  })

</script>
{% endmacro %}